import React,{ Suspense } from 'react';
import './App.css'

import { useTranslation } from 'react-i18next'

import { i18n } from './i18n/i18n';
import { namespaces } from './i18n/i18n.constants';
import { Select } from 'antd';

const { Option } = Select;

function App() {
  const {t} = useTranslation(namespaces.pages.hello);
  function changeLanguage(language:string) {

    i18n.changeLanguage(language); // i18n 提供的函数,切换语言，自动 mvvm 替换页面上的数据

  }
  return (
    
    <div className="App">
      <h1>{t('welcome')}</h1>
      {/*使用 namespases.commno 切换*/}
      <button>{t('buttons.ok',{ns:namespaces.common})}</button>
      <br/>
      <Select defaultValue="es" style={{ width: 120 }} onChange={changeLanguage}>
        <Option value="en">English</Option>
        <Option value="cn">中文</Option>
        <Option value="es">西班牙语</Option>
      </Select>
    </div>
    
  )
}

export default App
